<template>
    <view class="img-wrapper" @click.stop="handleOpenPopup">
        <view class="left-wrapper">
            <view class="img-list" v-for="(iten, index) in list.slice(0, 3)" :key="index">
                <image class="item-img" mode="aspectFill" :src="easyGetImgUrl(iten.ProductImage)"></image>
                <view class="count">x{{ iten.count?iten.count:iten.Amount }}</view>
            </view>
        </view>
        <view class="total-count" >
            <view class="number">共{{total}}件</view>
            <uni-icons type="forward" size="24"></uni-icons>
        </view>
    </view>
</template>

<script>
export default {

    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
	computed: {
	  total(){
			let num = 0;
			this.list.forEach(item =>{
				if(item.count){
					num += item.count
				}else{
					num += item.Amount
				}
			})
			return num
	  },
	},
    data() {
        return {
        }
    },
    methods: {
        handleOpenPopup() {
            this.$emit("open")
        },
		
    },
}
</script>

<style lang="scss">
.img-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24rpx;

    .left-wrapper {
        display: flex;
    }

    .img-list {
        width: 120rpx;
        height: 120rpx;
        position: relative;
        margin-right: 24rpx;
        overflow: hidden;
    }

    .item-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
    }

    .count {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
        width: 120rpx;
        color: $color-white;
        background: rgba(0, 0, 0, 0.3);
        font-size: $size-24;
        border-bottom-left-radius: 8rpx;
        border-bottom-right-radius: 8rpx;
    }

    .total-count {
        display: flex;
        align-items: center;
        font-size: 24rpx;

        .number {
            position: relative;
            bottom: 2rpx;
        }
    }
}
</style>
